/*Nana's CSS*/

		.skin{
			display:flex;
			position:relative;
			width:75%;
			min-width:20%;
			top:-10px;
          	margin-right:-5px;
			margin-left:29%;
			overflow:hidden;
			float:right;
			z-index:30;
          	overflow:hidden;
			}
			
		@font-face {
			font-family: 'Madalline-italic';
			src: url('Madalline-italic.otf') format('opentype');
			font-style: italic;	
			}
			
		.imprima-regular {
			font-family: "Imprima", sans-serif;
			font-weight: 400;
			font-style: normal;
			}
			
		body{
			height:100%;
			font-family:"Imprima", sans-serif;
			font-size:60px;
      		background-image:linear-gradient(to bottom right,#ffffff,#ABD7EB);
			background-repeat:no-repeat;
			background-size:cover;
			background-attachment:fixed;
			background-position:center;
			min-height: 2000px;
          	overflow-x:hidden;
			}
			
/*---------------------------------------Nav bar------------------------------*/
			

			
		.containerSub1{
			top:-200px;
			margin-left:29%;
			display:flex;
			position:relative;
			width:31%;
			float:left;
			height:95px;
			}	
			
		.ba {
			display:flex;
			width:40px;
			height:150px;
			display:flex;
			position:relative;
			padding:10px 6px 10px 8px;
			z-index:400;
			margin-right:8%;
			margin-left:1px;
			transition-duration: 0.4s;
			}
      
      	.ba img { width:70px;
          		  height:70px;
      		}
			
		.dropdown-content{
			display: flex;
			justify-content: center;
			align-items: center;
			text-decoration:none;
			left:-160px;
			margin-top:85px;
			display: none;
			position: absolute;
			min-width:250px;
			font-size:20px;
			background-color:#FFF9E0;
			border-radius:15px:
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          	overflow:hidden;
			}
		
		.ba li{
			display: flex;
			justify-content: center;
			align-items: center;
			background-color:#FFF9E0;
			font-size:16px;
			border:1px solid #FFF9E0 ;
			width:255px;
			height:70px;
			padding-bottom:20px;
			text-decoration:none;
			border-radius:15px;
			transition-duration: 0.4s;
          	overflow:hidden;
			}
			
		.ba li:hover{
			background-color:#FFFC27;
			}
			
		 #clean	{
			list-style-type: none;
			margin: 0;
			padding: 0;
			}
			
		.ba:hover .dropdown-content{
			display:block;
			}
			
		.ba  button {
			border:no-border;
			background-color:#FFF9E0;
			border:none;
			width:270px;
			border-radius:10px;
			}
			
		.ba button li a{
			text-decoration:none;
			color:black;
			margin-top:20px;
			}
/*---------------------------------------white button------------------------------*/	
		.bb{
			display:flex;
			width:40px;
			height:150px;
			display:flex;
			position:relative;
			padding:10px 16px 10px 16px;
			z-index:400;
			margin-right:8%;
			margin-left:10%;
			transition-duration: 0.4s;
			}
      	
      	  .bb img { width:70px;
          		  height:70px;
      		}
			
		.dropdown-content {
			display: flex;
			justify-content: center;
			align-items: center;
			text-decoration:none;
			margin-top:85px;
			display: none;
			position: absolute;
			min-width:250px;
			font-size:20px;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			background-color:#FFF9E0;
			border-radius:15px:
			}
		
		.bb li{
			display: flex;
			justify-content: center;
			align-items: center;
			background-color:#FFF9E0;
			font-size:16px;
			border:1px solid #FFF9E0 ;
			width:255px;
			height:70px;
			padding-bottom:20px;
			text-decoration:none;
			border-radius:15px;
			transition-duration: 0.4s;
			}
			
		.bb li:hover{
			background-color:#FFFC27;
			}
			
		 #clean	{
			list-style-type: none;
			margin: 0;
			padding: 0;
			}
			
		.bb:hover .dropdown-content{
			display:block;
			}
			
		.bb  button {
			border:no-border;
			background-color:#FFF9E0;
			border:none;
			width:270px;
			border-radius:10px;
			}
			
		.bb button li a{
			text-decoration:none;
			color:black;
			margin-top:20px;
			}
		
/*---------------------------------------Red button------------------------------*/		
		.bc{
			display:flex;
			width:40px;
			height:150px;
			display:flex;
			position:relative;
			padding:10px 12px 10px 6px;
			z-index:400;
			margin-right:10%;
			margin-left:10%;
			transition-duration: 0.4s;
			}
      
      	  .bc img { width:70px;
          		  height:70px;
      		}
			
		.dropdown-content {
			margin-right:200px;
			display: flex;
			justify-content: center;
			align-items: center;
			text-decoration:none;
			margin-top:85px;
			display: none;
			position: absolute;
			min-width:250px;
			font-size:20px;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			background-color:#FFF9E0;
			border-radius:15px;
          	 	overflow:hidden;
			}
		
		.bc li{
			display: flex;
			justify-content: center;
			align-items: center;
			background-color:#FFF9E0;
			font-size:16px;
			border:1px solid #FFF9E0 ;
			width:255px;
			height:70px;
			padding-bottom:20px;
			text-decoration:none;
			border-radius:15px;
			transition-duration: 0.4s;	
          	 	overflow:hidden;
			}
			
		.bc li:hover{
			background-color:#FFFC27;
			}
			
		 #clean	{
			list-style-type: none;
			margin: 0;
			padding: 0;
			}
			
		.bc:hover .dropdown-content{
			display:block;
			}
			
		.bc  button {
			border:no-border;
			background-color:#FFF9E0;
			border:none;
			width:270px;
			border-radius:10px;
			}
			
		.bc button li a{
			text-decoration:none;
			color:black;
			margin-top:20px;
			}
/*---------------------------------------Yellow button------------------------------*/	
				
		.splash-container {
			position: fixed; /* Ensures it covers the whole screen */
			top: 0px;
			left: 0;
			width: 100vw;
			height:100vh;
			background-color: #333; /* Choose your background color */
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: white;
			z-index: 100; /* Ensures it's on top of everything else */
			transition: opacity 3s ease-out; /* Add smooth transition for fading out */
			}

			
		.infoBublePre{
			color:black;
			flex-direction:row;
			width:400px;
			height:290px;
			background-color:white;
          	margin:290px 0px 30px 30px;
			font-size:22px;
			border-radius:15px;
			margin-left:px;
          	padding:5px;
          	list-style-type:none;
			}
	
		.upcomEventsPre{
			display:flex;
			background-image:url(bay.avif);
			background-repeat:no-repeat;
			background-attachment:relative;
			background-position:center;
			background-size:cover;
			background-color:#cfcfcf;
			top:10px;
			width:100%;
			height:500px;
			margin-top:60px;
			border-radius:15px;
			}
			
		.announcePre{
			color:black;
			margin-top:120px;
			display:flex;
          	flex-wrap:no-wrap;
			position:absolute;
			font-size: clamp(.4rem, 1vw + 1rem, 2rem);
			background-color:white;
			max-height:120px;
			width:54%;
			border-radius:15px 0px 0px 15px;
			margin-left:34%;
          	margin-right:0%;
          	padding:20px 20px 20px 40px;
			z-index:500;
			text-align:center;
			background-image:linear-gradient(to bottom right,#99D9EA,#ffffff);
            overflow:hidden;
			}

/*---------------------------------------Title Bar------------------------------*/	
		
		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
			}

		.containerA{
          	display:flex;
          	position:relative;
          	flex-direction:column;
			width:98%;
			height:auto;
			}
		
		
		.wrapperS{
          	top:-150;
          	display:flex;
          	position:relative;
          	flex-direction:column;
			height:-100px;
			width:98%;
			background-color:transparent;
			margin-top:15px;
			margin-left:1%;
			z-index:15;
			}
			
		.wrapperS span{
			font-family:'Madalline-italic', serif;
			position:relative;
			z-index:9999;
			font-weight:bold;
			padding-left:20px;
				  text-shadow: 
					1px 0 0 white, 
					-1px 0 0 white, 
					0 1px 0 white, 
					0 -1px 0 white;
			}
			
		.chip{
			display:flex;
			flex-direction:row;
			position:relative;
			flex-wrap:wrap;
			right:80px;
			margin-top:-200px;
			float:right;
			z-index:350;
			}
			
		.stip1{
          	
			background-image:linear-gradient(to bottom right,#99D9EA,#ffffff);
          	display:flex;
			position:relative;
          	min-width:80%;
			height:2px;
			flex-wrap:no-wrap;
          	margin:5px 0px 15px 65px;
          	box-sizing:border-box;
			z-index:500;
          
			}
		
		.stip2{
			background-image:linear-gradient(to bottom right,#99D9EA,#ffffff);
          	position:relative;
			min-width:82%;
			height:3px;
			margin:5px 0px 15px 0px;
         	box-sizing:border-box;
			z-index:500;
          
			}
		
		.stip3{
			
          	background-image:linear-gradient(to bottom right,#99D9EA,#ffffff);
          	position:relative;
			min-width:84%;
			height:4px;
         	margin:5px 0px 15px 0px;
			z-index:500;
          	
			}
		
		.stip4{
			background-image:linear-gradient(to bottom right,#99D9EA,#ffffff);
         	 position:relative;
			min-width:86%;
			height:5px;
			margin:5px 0px 30px 0px;
			z-index:500;
			}

		.title{
			display:flex;
     		position:reletive;
          	width:auto;
            height:65px;
			margin-top:-35px;
          	font-size: 95px;
			margin-left:.3em;
			z-index:10;
			}
			
		.slogan{
			font-family:'Madalline-italic', serif;
			display:flex;
			flex-direction:row;
			flex-wrap:no-wrap;
			position:relative;
			justify-content:center;
			align-items:center;
			min-width:320px;
			margin-top:10px;
			}
			
		span{
			display:flex;
			font-size:44px;
			text-align:center;
			align-items:center;
			font-size: clamp(1rem, 1vw + 1rem, 4rem);
			}
/*---------------------------------------Proverb & Note button------------------------------*/
	
		.containerB{
			width:100%;
			height:35vh;
			margin-top:20px;
			padding-bottom:40px;
			}
			
		.disclaimer{
			display:flex;
			position:relative;
			flex-direction:column;
			flex-wrap:wrap;
			font-size: clamp(.3rem, .9vw + .5rem, 1.5rem);
			min-width:13em;
			max-width:80%;
			margin:90px 10px 5px -10px;
			padding-left:20px;
			padding-bottom:1px;
			padding-right:15px;
			float:left;
		    border-radius:0px 10px 10px 0px;
			background-color:#cfcfcf;
			}
			
		.toolTip{
			position:relative;
			display:inline-block;
			cursor:pointer;
			height:95%;
			}
			
		.toolTip .toolTipText{
				visability:hidden;
				width:280px;
				height:94%;
          		font-size:12px;
				text-align:center;
				background-color:#cfcfcf;
				color: black;
				position:absolute;
				border-radius:7px;
				font-size:auto;
				z-index:18;
				top:0px;
				left:24%;
				padding-top:3px;
				margin-left:6px;
				border:3px solid #cfcfcf;
				opacity:0;
				transition:opacity 0.3s;
				}
				
		.toolTip:hover .toolTipText{
				visability:visable;
				opacity:1;}
			
		.principle{	
			display:flex;
			position:relative;
			flex-direction:row;
			flex-wrap:wrap;
			height:auto;
			width:85%;
			max-width:1000px;
			background-color:#ABD7EB;
			margin:20px -1px 3px 20px;
			float:right;
		    border-radius:15px 0px 0px 15px;
			}
			
		#Pro1{
			font-size:36px;
			font-weight:bold;
			margin-left:15px;
			padding:30px;
			text-decoration:none;
			}
			
		.principle span{
			/*background-image:linear-gradient(to bottom right,#99D9EA,#ffffff);*/
			width:100%;
			display:flex;
			position:relative;
			flex-direction:row;
			flex-wrap:wrap;
			font-size: clamp(1.5rem, .5vw + .5rem, 2rem);
			text-decoration:underline;
			margin-top:1px;
			padding:5px;
			padding:50px;
			height:50px;
			float:left;
          	background-color:#ABD7EB;
			}
			
		#jP{
			display:flex;
			position:relative;
			flex-direction:row;
			flex-wrap:wrap;
			background-image:none;
			width:80%;
			height:auto;
			right:185px;
			margin-top:3%;
			margin-bottom:20px;
			background-color:#ABD7EB;
			font-size: 24px;
			}
	
		.principle p{
			width:100%;
			display:flex;
			position:relative;
			flex-direction:row;
			background-image:linear-gradient(to bottom right,#99D9EA,#ffffff);
			font-size:25px;
			font-size: clamp(1.rem, 1vw + 1rem, 2.2rem);
			flex-wrap:wrap;
			padding:5px 0px 5px 30px;
			margin-top:1px;
			padding:5x;
			float:right;
			}
			
		#Idiom{
			font-size:34px;
			margin-left:-30px;
			margin-right:35px;
			border-radius:10px;
			
		}
			
		#request{
			display:flex;
			position:relative;
			flex-direction:row;
			width:80%;
			background-image:none;
			font-size:17px;
			font-size: clamp(1.rem, 1vw + 1rem, 1.2rem);
			flex-wrap:wrap;
			margin-left:34px;
          	margin-right:20px;
			padding:10px;
          	float:right;
			}
			
	.containerPre{
			margin-top:-100px;
			display:flex;
			position:relative;
			width:100%;
			height:650px;
			margin-right:-20;
			justify-content:center;
			padding-top:3px;
			overflow-y:none;
			}
			
/*--------------------------------------- Event Announcement------------------------------*/
			
		.containerC{
			margin-top:80px;
			display:flex;
			position:relative;
			width:100%;
			height:650px;
			margin-right:-20;
			justify-content:center;
			padding-top:36px;
			overflow-y:none;
			}

		
		#KaPow {
			position:absolute;
			width:55%;
          	height:auto;
			margin-top:-90px;
			margin-left:-15px;
			max-width:500px;
			z-index:300;
			}
      
      .upcomEvents{
			display:flex;
			background-image:url(/bay.avif);
			background-repeat:no-repeat;
			background-attachment:relative;
			background-position:center;
			background-size:cover;
			background-color:#cfcfcf;
			top:10px;
			width:100%;
			height:500px;
			margin-top:60px;
			border-radius:15px;
			}
					
		.rsvp{
			top:-40px;
			display:flex;
			align-items:center;
			position:relative;
			height:10%;
			width:auto;
			margin-left:2em;
			margin-right:2em;
			font-size:22px;
			background-image:linear-gradient(to bottom right,#99D9EA,#ffffff);
			padding:20px;
			border-radius:15px;
			overflow:hidden;
			}
			

	
	.wrapper{
			display:flex;
			position:relative;
			width:0%;
			height:100px;
			margin-top:400px;
			margin-right:1%;
			}	
		
	.camp img{
			position:absolute;
			z-index:9998;
			margin-top:200px;
			border-radius:10px;
			max-height:400px;
			max-width:400px;
			right:3%;
			min-height:150px;
			min-width:150px;
			box-shadow:5px 5px 5px 2px grey;
			}
			
		
		
	.announce{
			margin-top:120px;
			display:flex;
          	flex-wrap:no-wrap;
			position:absolute;
			font-size: clamp(.4rem, 1vw + 1rem, 2rem);
			max-height:120px;
			width:54%;
			border-radius:15px 0px 0px 15px;
            padding:20px 20px 20px 40px;
			z-index:500;
			text-align:center;
			background-image:linear-gradient(to bottom right,#99D9EA,#ffffff);
            overflow-x:hidden;
			overflow-y:hidden;
      		right:0;
			}
		
	.infoBuble{
			flex-direction:row;
			width:7em;
			height:290px;
          	width:240px;
			background-color:white;
          	margin:290px 30px 0px 15px;
			font-size:17px;
			padding:10px;
			border-radius:15px;
          	overflow:visible;
			}
				
	.infoBuble ul{
			margin-top:40px;
						}
					
	.rsvp{
			top:-40px;
			display:flex;
			align-items:center;
			position:relative;
			height:10%;
			width:auto;
			margin:0px 10px 0px 10px;
			font-size:22px;
			background-image:linear-gradient(to bottom right,#99D9EA,#ffffff);
			padding:20px;
			border-radius:15px;
			overflow:hidden;
			}
				
	.rsvpTag{
			margin-top:200px;
			text-align:center;
          	clamp:(.4rem, 1vw + 1rem, 2rem);
			width:98%;
			max-width:950px;
			height:120px;
			box-sizing:border-box;
			border:1px solid red;
			margin:10px;
          	}
				
	.wrapper{
			float:right;
			position:relative;
			max-height:400px;
			width:100%;
			height:400px;
			z-index:200;
			}
		
		#FullName {
				margin-left:30px;
				margin-top:px;
				height:30px;
				width:250px;
				border-radius:8px;
				}
			
		#Email	{
				margin-left:30px;
				margin-top:10px;
				height:30px;
				width:250px;
				border-radius:8px;
				}
				
		#clickIt{	
				width:160px;
				height:40px;
				padding:10px;
				font-size: .68rem;
				background-color:#A4B3E8;
				border-radius:7px;
				text-decoration:none;
				border: 1px solid #7D5716;
				margin:30px;
				margin-left:30px;
				}
		
		#clickIt:hover{
				background-color:#f0f4f5;
				}	
			
	.sneg{
       		position:absolute;
			width:40%;
			height:5px;
			background-image:linear-gradient(to bottom right,#99D9EA,#ffffff);
			opacity:0;
			box-sizing:border-box;
			}
				
	footer{
			width:100%;
			height:200px;
			background-color:#B994CC;
			}
		
	.containerSub2{
			display:flex;
			position:relative;
			width:80%;
			max-width:800px;
			height:95px;
			}
		
		.fa{
			width:80px;
			height:80px;
			display:flex;
			position:relative;
			align-items:center;
			justify-content:center;
			z-index:400;
			top:14px;
			left:10%;
			transition-duration: 0.4s;
			}
			
		 .dropdown-contentB {
			margin-right:200px;
			display: flex;
			justify-content: center;
			align-items: center;
			text-decoration:none;
			margin-top:85px;
			display: none;
			position: absolute;
			min-width:230px;
			font-size:20px;
			bottom:85px;
			left:-50%;
			background-color:#FFF9E0;
			border-radius:15px;
	
			}
		
		.fa li{
			display: flex;
			justify-content: center;
			align-items: center;
			background-color:#FFF9E0;
			font-size:16px;
			border:1px solid #FFF9E0 ;
			width:215px;
			height:50px;
			padding-bottom:20px;
			text-decoration:none;
			border-radius:15px;
			transition-duration: 0.4s;
			}
			
		.fa li:hover{
			background-color:#FFFC27;
			}
			
		 #clean	{
			list-style-type: none;
			margin: 0;
			padding: 0;
			}
			
		.fa:hover .dropdown-contentB{
			display:block;
			}
			
		.fa  button {
				border:no-border;
			background-color:#FFF9E0;
			border:none;
			width:230px;
			border-radius:10px;
	
			}
			
		.fa button li a{
			text-decoration:none;
			color:black;
			margin-top:20px;
			}
/*---------------------------------------white button------------------------------*/		
		.fb{
			width:80px;
			height:80px;
			display:flex;
			position:relative;
			align-items:center;
			justify-content:center;
			z-index:400;
			top:14px;
			left:20%;
			transition-duration: 0.4s;
			}
			
	

		.fb li{
			display: flex;
			justify-content: center;
			align-items: center;
			background-color:#FFF9E0;
			font-size:16px;
			border:1px solid #FFF9E0 ;
			width:215px;
			height:50px;
			padding-bottom:20px;
			text-decoration:none;
			border-radius:15px;
			transition-duration: 0.4s;
			}
			
		.fb li:hover{
			background-color:#FFFC27;
			}
			
		 #clean	{
			list-style-type: none;
			margin: 0;
			padding: 0;
			}
			
		.fb:hover .dropdown-contentB{
			display:block;
			}
			
		.fb  button {
				border:no-border;
			background-color:#FFF9E0;
			border:none;
			width:230px;
			border-radius:10px;
			}
			
		.fb button li a{
			text-decoration:none;
			color:black;
			margin-top:20px;
			}
/*---------------------------------------Red button------------------------------*/			
		.fc{
			width:80px;
			height:80px;
			display:flex;
			position:relative;
			align-items:center;
			justify-content:center;
			z-index:400;
			top:14px;
			left:30%;
			transition-duration: 0.4s;
			
			}
			
		.dropdown-contentC {
			margin-right:200px;
			display: flex;
			justify-content: center;
			align-items: center;
			text-decoration:none;
			margin-top:85px;
			display: none;
			position: absolute;
			min-width:230px;
			font-size:20px;
			bottom:85px;
			left:-170px;
			background-color:#FFF9E0;
			border-radius:15px;
			}
			
		
		.fc li{
			display: flex;
			justify-content: center;
			align-items: center;
			background-color:#FFF9E0;
			font-size:16px;
			border:1px solid #FFF9E0 ;
			width:215px;
			height:50px;
			padding-bottom:20px;
			text-decoration:none;
			border-radius:15px;
			transition-duration: 0.4s;
			}
			
		.fc li:hover{
			background-color:#FFFC27;
			}
			
		 #clean	{
			list-style-type: none;
			margin: 0;
			padding: 0;
			}
			
		.fc:hover .dropdown-contentC{
			display:block;
			}

		.fc  button {
			border:no-border;
			background-color:#FFF9E0;
			border:none;
			width:230px;
			border-radius:10px;
			}
			
		.fc button li a{
			text-decoration:none;
			color:black;
			margin-top:20px;
			}
			
		
/*---------------------------------------Yellow button------------------------------*/	

		#Admin{
			width:100%;
			text-align:center;
			
		}